<template>
	<view class="m-b-25 p-25 bg-white radius-15" v-if="props.data?.list?.length > 0">
		<view class="coupon-box">
			<view class="title-box">
				<text class="tit">领券专区</text>
				<coreshop-view-more @hanldeClickViewMore="hanldeClickViewMore"></coreshop-view-more>
			</view>
			<view class="coupon-card-box">
				<scroll-view :scroll-x="true" class="scroll-box" :enable-flex="true">
					<view class="card-box" v-for="item, index in props.data?.list?.slice(0, props.data.limit)"
						:key="index">
						<image class="coupon-bg" :src="handleStaticResources('/static/images/coupon-bg.jpg')"></image>
						<view class="coupon-msg">
							<view class="coupon-tit">
								<view class="name">
									<text class="tit">{{ item.name }}</text>
								</view>
								<view class="time">
									<text class="tit"> 有效期：{{ timeFormat(item.startTime, 'yyyy-mm-dd') }} 至
										{{ timeFormat(item.endTime, 'yyyy-mm-dd') }}</text>
								</view>
							</view>
							<view class="btn-box">
								<text class="btn-tit" @click="handleReceiveCoupon(item.id)">立即领取</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import { handleStaticResources, handleRouteNavigateTo, receiveCoupon } from '@/core/utils';
	import { useLoginStore } from '@/core/store';

	/** 登录store */
	const _useLoginStore = useLoginStore();

	const props = withDefaults(defineProps<{
		data : any,
	}>(), {
		data: {}
	});

	const hanldeClickViewMore = () => {
		handleRouteNavigateTo('/pages/subpackage/coupon/coupon');
	}

	const handleReceiveCoupon = (id : number) => {
		_useLoginStore.checkLogin(() => {
			receiveCoupon(id)
		});
	}
</script>
<style lang="scss" scoped>
	@import './home-coupon.scss';
</style>